<template>
	<view :style="{
		'padding-bottom':king!=1? '100rpx':''
	}">
		<my-tab @ontap='ontap' 
		:data="{
			id:info.cur_id,
			type:2
		}"
		:dianzan='info.collection' />
		<u-swiper height='750' v-if='info' :list="info.details_image.split(',')"></u-swiper>
		<!-- 秒杀 -->
		<miaosha v-if="info.activity.activity_type==3&&info.purchase==0" :timestamp='timestamp' title='限时免费' />
		<view v-else class="miaosha">
			<view class="miaosha_1">
				<text>恰同学年少</text>
				<text>邀请朋友一起参加课程</text>
			</view>
			<view class="miaosha_2" @click="submit">
				立刻开团
			</view>
		</view>
		<!-- 价格简介 -->
		<view class="brief">
			<!--  v-if="king!=1" -->
			<view class="brief_1" v-if="info.purchase==0">
				<view class="brief_1_1" v-if="info.activity.activity_type!=3&&info.activity.activity_type!=2">
					<text>￥</text><text>{{info.original_price}}</text>
				</view>
				<!-- 折扣 -->
				<view class="brief_1_1" v-if="info.activity.activity_type==2">
					<text>￥</text><text>{{info.original_price}}</text>
				</view>
				<!-- //限时免费 -->
				<view class="brief_1_1" v-if="info.activity.activity_type==3"><text>￥</text><text>0.00</text></view>
				<!-- 折扣原价-->
				<!-- 	<view class="brief_1_2" v-if="info.activity.activity_type==3||info.activity.activity_type==2">
					<text>￥</text><text>{{info.original_price}}</text>
				</view> -->

			</view>
			<view class="brief_2">{{info.name}}</view>
			<view class="brief_3">{{info.synopsis}}</view>
			<view class="brief_4">
				<text>{{info.study}}</text>
				人已学习
			</view>
			<view class="brief_5">
				<view class="brief_5_1">
					<text>《前瞻与回顾》</text>
					<text>购买智伍汇大课继续学习</text>
				</view>
				<image style="width:140rpx ;height: 58rpx;" src="https://s4.ax1x.com/2022/01/18/70v8ds.png" />
			</view>
			<view class="brief_6">
				<view class="brief_6_1">
					主持人
				</view>
				<view class="brief_6_2">
					<image style="width:88rpx ;height: 88rpx;border-radius: 100%;" :src="info.lecturer_image" />
					<view class="brief_6_3">
						<text>{{info.lecturer_name}}</text>
						<text>{{info.lecturer_synopsis}}</text>
					</view>
				</view>
			</view>
			<view class="brief_7">
				<mp-html :content="info.content" />
			</view>
		</view>
		<!-- 热门推荐 -->
		<view class="">
			<my-recommend :data='recommend.data' />
		</view>
		<view class="xian" />
		<view style="position: relative">
			<view class="all_text">留言板</view>
			<my-pinglun @onchange2='onchange2' @onchange='onchange' :type="king" :data='liuyan' />
		</view>
		<view style="text-align: center; position: fixed;bottom: 0;width: 100%;"
			v-if="info.purchase==0&&info.activity.activity_type!=3||info.activity.activity_type==2" @click="purchase">
			<image style="width:300rpx ;height:88rpx ;margin-top: 20rpx;"
				src="https://s4.ax1x.com/2022/01/19/7D8po4.png" mode="">
			</image>
		</view>
		<view class="foot" v-if="info.activity.activity_type!=2&&info.purchase==1||info.activity.activity_type==3">
			<view class="foot_1">
				<image src="https://s4.ax1x.com/2022/01/18/7BAYxs.png" style="width: 40rpx;height: 40rpx;"></image>
				<view style="margin: 10rpx;;">
					<input confirm-type='search' @confirm="search" v-model="value" placeholder="写留言，留下你的感悟" />
				</view>
			</view>
			<!-- 	<view class="cell">
				<min-badge count="19">
					<view class="test"></view>
				</min-badge>
			</view>
			<view class="cell">
				<min-badge count="19">
					<view class="test1"></view>
				</min-badge>
			</view> -->
		</view>
	</view>
</template>

<script>
	import miaosha from '../../components/miaosha.vue'
	export default {
		components: {
			miaosha
		},
		data() {
			return {
				info: {},
				timestamp: '',
				type: '',
				value: '',
				recommend: {},
				cur_id: '',
				liuyan: null,
				pid: 0,
				king: '', //1购买2未购买
				form: {
					type: 1,
					page: 1
				}
			};
		},
		computed: {
			// times(){
			//  console.log(this.info.activity.end_time-this.info.activity.start_time)
			// 	return  this.info.activity.end_time-this.info.activity.start_time
			// }
		},
		methods: {
			ontap(a) {
				this.getinfo(this.cur_id)
			},
			onchange2(a) {
				this.form.type = a,
					this.lidty()
			},
			onchange(a, b, c) {
				if (a == '点赞') {
					this.pid = b
					this.$api('broadcast/support', {
						cur_id: this.cur_id,
						review_id: this.pid
					}).then(res => {
						if (res.code == 1) {
							this.$toast(res.msg, 1)
							this.lidty()

						}
					})
				} else {
					let form = {
						pid: b,
						cur_id: this.cur_id
					}
					uni.navigateTo({
						url: `../jxpl/jxpl?form=${JSON.stringify(form)}&content=${JSON.stringify(c)}`
					})


				}
			},
			search(item) {
				this.$api('broadcast/commentSave', {
					cur_id: this.cur_id,
					content: this.value,
					pid: this.pid
				}).then(res => {
					this.$toast(res.msg, 1)
					this.lidty()
				})
			},
			lidty() {
				this.form.cur_id = this.cur_id
				this.$api('broadcast/commentList', this.form).then(res => {
					this.liuyan = res.data
					// 	

					console.log(Date.parse(res.data.data[0].creat_time.replace(/-/gi, "/")))
				})
			},
			getinfo(a) {

				this.$api('boutique/recommend').then(res => {
					this.recommend = res.data
				})

				this.$api('boutique/bouMsg', {
					cur_id: a
				}).then(res => {
					this.info = res.data
					this.timestamp =
						this.info.activity.end_time - this.$now
					console.log(this.timestamp)
				})




			},
			purchase() {
				uni.navigateTo({
					url: `/pages/play/purchase?cur_id=${this.cur_id}`
				});
			},
		},
		onLoad(option) {
			this.king = option.type
			this.type = option.type
			this.cur_id = option.cur_id
			this.getinfo(option.cur_id)
			this.lidty()
		}
	}
</script>

<style lang="scss" scoped>
	.foot {
		padding: 10rpx 0 10rpx 0;
		display: flex;
		position: fixed;
		width: 100%;
		bottom: 0;
		justify-content: space-around;
		align-items: center;

		.foot_1 {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 90%;
			height: 68rpx;
			background: #F5F5F5;
			border-radius: 50rpx
		}
	}

	.cell {
		margin: 22rpx;
	}

	.test1 {
		width: 44rpx;
		height: 44rpx;
		background-image: url(https://s4.ax1x.com/2022/01/18/7BF7kD.png);
		background-size: 100% 100%;
		background-repeat: no-repeat
	}

	.test {
		width: 44rpx;
		height: 44rpx;
		background-image: url(https://s4.ax1x.com/2022/01/18/7Bi0aD.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.badge {
		position: absolute;
	}

	.miaosha {
		height: 140rpx;
		background-color: #FC2053;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 30rpx;
		padding-right: 30rpx;

		.miaosha_2 {
			width: 172rpx;
			height: 58rpx;
			text-align: center;
			line-height: 58rpx;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 29px;
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			color: #FF2424;
			opacity: 1;
		}

		.miaosha_1 {
			text:nth-of-type(1) {
				font-size: 36rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #FFFFFF;
				opacity: 1;
			}

			text:nth-of-type(2) {
				margin-top: 10rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				opacity: 1;

			}


			text {
				display: block;
			}
		}
	}

	.all_text {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		margin-left: 20rpx;
		color: #131314;
		opacity: 1;
	}

	.xian {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		height: 0px;
		border: 1rpx solid #E3E3E3;
		opacity: 1;
	}

	.brief {
		padding: 20rpx 20rpx 40rpx 20rpx;
		border-bottom: 1px solid #E3E3E3;

		.briefxian {
			height: 0px;
			box-sizing: border-box;
			border: 1px solid #E3E3E3;
			opacity: 1;
		}

		.brief_7 {
			.brief_7_1 {
				margin-top: 20rpx;

				text {
					display: block;
				}

				text:nth-of-type(1) {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #131314;
					opacity: 1;
				}

				text:nth-of-type(2) {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					line-height: 42rpx;
					color: #131314;
					letter-spacing: 1rpx;
					opacity: 1;
				}
			}
		}

		.brief_6 {
			margin-top: 30rpx;

			.brief_6_2 {
				margin-top: 20rpx;
				display: flex;

				.brief_6_3 {
					margin-left: 20rpx;

					text:nth-of-type(1) {
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: #131314;
						opacity: 1;
					}

					text:nth-of-type(2) {
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #91969A;
						opacity: 1;
					}

					text {
						display: block;
					}
				}
			}

			.brief_6_1 {
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #131314;
				opacity: 1;
			}
		}

		.brief_5 {
			margin-top: 30rpx;
			padding-left: 20rpx;
			padding-right: 20rpx;

			.brief_5_1 {
				text {
					display: block;
				}

				text:nth-of-type(1) {
					font-size: 30rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #131314;
					opacity: 1;
				}

				text:nth-of-type(2) {
					margin-top: 10rpx;
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #131314;
					opacity: 1;

				}
			}

			display: flex;
			justify-content: space-between;
			align-items: center;
			background-image: url(https://s4.ax1x.com/2022/01/18/70vnRf.png);
			background-size: 100% 100%;
			height: 132rpx;
			background-repeat: no-repeat;
		}

		.brief_4 {
			text {
				color: #FF2424;
			}

			margin-top: 10rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #131314;
			opacity: 1;
		}

		.brief_3 {
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #131314;
			opacity: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
		}



		.brief_1 {
			display: flex;
			align-items: flex-end;

			.brief_1_1 {
				margin-right: 10rpx;

				text:nth-of-type(1) {
					font-size: 30rpx;
					font-family: HarmonyOS Sans;
					font-weight: bold;
					color: #FF2424;
					opacity: 1;
				}

				text:nth-of-type(2) {
					font-size: 36rpx;
					font-family: HarmonyOS Sans;
					font-weight: bold;
					color: #FF2424;
					opacity: 1;
				}
			}

			.brief_1_2 {
				text:nth-of-type(1) {
					font-size: 25rpx;
					font-family: HarmonyOS Sans;
					color: #91969A;
					opacity: 1;
				}

				text:nth-of-type(2) {
					font-size: 28rpx;
					font-family: HarmonyOS Sans;
					font-weight: 400;
					color: #91969A;
					opacity: 1;
					text-decoration: line-through
				}
			}
		}

		.brief_2 {
			margin-top: 10rpx;
			margin-bottom: 10rpx;
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #131314;
			opacity: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
		}


	}

	// .centent {
	// 	padding: 0 0rpx 0 35rpx;
	// 	display: flex;
	// 	justify-content: space-between;
	// 	align-items: center;

	// 	.centent_right {
	// 		width: 30%;
	// 		border-left: 1px solid #FFFFFF;
	// 		text-align: center;

	// 		text {
	// 			display: block;
	// 		}

	// 		text:nth-of-type(1) {
	// 			font-size: 30rpx;
	// 			font-family: Source Han Sans CN;
	// 			font-weight: 500;
	// 			color: #FFFFFF;
	// 			opacity: 1;
	// 		}
	// 	}

	// 	.centent_left {
	// 		text {
	// 			display: block;
	// 		}

	// 		text:nth-of-type(1) {
	// 			font-size: 36rpx;
	// 			font-family: Source Han Sans CN;
	// 			font-weight: bold;
	// 			color: #FFFFFF;
	// 			opacity: 1;
	// 		}

	// 		text:nth-of-type(2) {
	// 			font-size: 28rpx;
	// 			font-family: Source Han Sans CN;
	// 			font-weight: 400;
	// 			color: #FFFFFF;
	// 			opacity: 1;
	// 			margin-top: 10rpx;
	// 		}
	// 	}
	// }

	// .centent {
	// 	background-color: #FC2053;
	// 	min-height: 140rpx;
	// }

	.top {
		padding: 0rpx 20rpx 20rpx 20rpx;
		height: 750rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat
	}
</style>
